<template>
  <view>
    <view
      class="card"
      v-for="(item, k) in list"
      :key="k"
      @click="goDetails(item)"
    >
      <view class="namebox">
        <view class="name" style="flex: 1"
          >{{ item.hotelName }}({{ item.homeNumber }})</view
        >
        <view
          class="kaipiaobtn"
          @click="toopen(item)"
          v-if="item.invoiceStatusEnum.key == 0"
          >开票</view
        >
        <view class="yikaipiao status" v-if="item.invoiceStatusEnum.key == 1"
          >已开票</view
        >
        <view class="yiyuding status" v-if="item.invoiceStatusEnum.key == 2"
          >已预定</view
        >
        <view class="yudengji status" v-if="item.invoiceStatusEnum.key == 3"
          >预登记</view
        >
        <view class="yiruzhu status" v-if="item.invoiceStatusEnum.key == 4"
          >已入住</view
        >
        <view class="kaipiaozhong status" v-if="item.invoiceStatusEnum.key == 5"
          >开票中</view
        >
      </view>
      <view class="roomtypeox">
        <view class="roomtype">{{ item.roomName }}</view>
        <view class="source">{{ item.orderSource }}</view>
      </view>
      <view class="timebox">
        <view class="time">{{ item.entryTime }}~{{ item.leaveTime }}</view>
        <view class="price">
          <text class="money">￥</text>
          {{ item.orderPrice }}
        </view>
      </view>
    </view>
    <view
      v-show="finish"
      style="
        text-align: center;
        color: #ccc;
        padding-top: 50upx;
        padding-bottom: 60upx;
      "
    >
      <text
        style="
          display: inline-block;
          width: 60upx;
          border-bottom: 2upx solid #ccc;
          margin-bottom: 10upx;
        "
      ></text>
      <text style="padding-left: 40upx; padding-right: 40upx; color: #797979"
        >已经是最后一页了</text
      >
      <text
        style="
          display: inline-block;
          width: 60upx;
          border-bottom: 2upx solid #ccc;
          margin-bottom: 10upx;
        "
      ></text>
    </view>
    <movable-area>
      <movable-view
        :x="x"
        :y="y"
        direction="all"
        @touchend="onChange"
        animation
      >
        <image
          src="http://m.cloudhouse.live/src%3Dhttp___pmo6fa480.pic39.websiteonline.cn_upload_017afa5ab8bf0da8012062e39819b3.gif%26refer%3Dhttp___pmo6fa480.pic39.websiteonline.gif"
          mode=""
          @click="newqa"
          class="kpzy"
        ></image>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      pageNum: 1,
      pageSize: 10,
      startTime: this.$moment().format("YYYY-MM-DD 00:00:00"),
      finish: false,
      x: 0,
      y: 386,
      windowWidth: 0,
      windowHeight: 0,
    };
  },
  created() {
    uni.getSystemInfo({
      success: (res) => {
        console.log(res);
        this.windowWidth = res.windowWidth;
        this.x = res.windowWidth - 70;

        this.windowHeight = res.windowHeight;
      },
    });
  },
  methods: {
    onChange(e) {
      this.y = e.changedTouches[0].clientY;
      if (e.changedTouches[0].clientX > this.windowWidth / 2) {
        this.x = this.windowWidth - 70;
      } else {
        this.x = 10;
      }
    },
    //点击跳转  发票详情
    goDetails(row) {
      if (row.invoiceStatusEnum.key == 1 || row.invoiceStatusEnum.key == 5) {
        uni.navigateTo({
          url:
            "/pages/invoiceDetails/invoiceDetails?item=" + JSON.stringify(row),
        });
      }
    },
    newqa() {
      uni.navigateTo({
        url: "/pages/newqa/newqa",
      });
    },
    toopen(item) {
      uni.navigateTo({
        url: "/pages/invoice/invoice?item=" + JSON.stringify(item),
      });
    },
    getList() {
      if (this.finish) {
        return;
      }
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      this.$http
        .get(
          "/orderRecord/list",
          {
            phoneNumber: uni.getStorageSync("phone"),
            pageSize: this.pageSize,
            pageNum: this.pageNum,
            startTime: this.startTime,
          },
          {
            header: {
              "content-type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          uni.hideLoading();
          let data = res.data;
          uni.stopPullDownRefresh();
          if (data.code == 0) {
            if (!data.data) {
              this.finish = true;
              return;
            }
            data.data.rows.forEach((item) => {
              item.entryTime = this.$moment(item.entryTime).format("MM-DD");
              item.leaveTime = this.$moment(item.leaveTime).format("MM-DD");
            });
            this.list = this.list.concat(data.data.rows); //合并数组
            if (this.list.length == data.data.total) {
              this.finish = true;
            }
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
  },
  onShow() {
    this.finish = false;
    // this.getList();
    uni.startPullDownRefresh();
  },
  onReachBottom() {
    this.pageNum = this.pageNum + 1;
    this.getList();
  },
  onPullDownRefresh() {
    this.finish = false;
    this.pageNum = 1;
    this.list = [];
    this.getList();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },

  onBackPress() {
    console.log(e);
    if (e.from == "backbutton") {
      uni.showModal({
        title: "提示",
        content: "是否保存？",
        success: function (res) {
          if (res.confirm) {
            uni.showToast({
              title: "用户点击确定",
              duration: 1000,
            });
          } else if (res.cancel) {
            uni.showToast({
              title: "用户点击取消",
              duration: 1000,
            });
          }
          uni.navigateBack({
            delta: 1,
          });
        },
      });
      return true; //阻止默认返回行为
    }
  },
};
</script>

<style scoped>
.card {
  width: 702rpx;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(245, 245, 245, 1);
  box-shadow: 0px 8rpx 10rpx 0px rgba(0, 0, 0, 0.1);
  border-radius: 16rpx;
  margin: auto;
  margin-top: 10px;
  padding: 40rpx 24rpx;
}
.namebox {
  display: flex;
  justify-content: space-between;
}
.name {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
.kaipiaobtn {
  width: 96rpx;
  height: 40rpx;
  border: 1px solid rgba(67, 130, 255, 1);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-family: PingFang SC;
  color: rgba(67, 130, 255, 1);
}
.status {
  width: 96rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roomtypeox {
  display: flex;
  margin-top: 20rpx;
}
.roomtype {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #797979;
}
.source {
  font-size: 28rpx;
  font-family: PingFang SC;
  color: #797979;
  margin-left: 40rpx;
}
.timebox {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  align-items: center;
}
.time {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #797979;
}
.price {
  font-size: 40rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
.money {
  font-size: 24rpx;
  margin-right: 10rpx;
}
.kaipiaozhong {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 145, 37, 1);
}
.yikaipiao {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: black;
}
.yiyuding {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 145, 37, 1);
}
.yudengji {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 203, 96, 1);
}
.yiruzhu {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(121, 121, 121, 1);
}
.kaipiaozhong {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4382ff;
}
.kpzy {
  height: 120upx;
  width: 120upx;
}
.kpzy image {
  width: 100%;
  height: 108upx;
}
movable-area {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99;
}
movable-view {
  pointer-events: fill;
  height: 120rpx;
  width: 120rpx;
}
</style>
<style>
page {
  background: white;
}
</style>